<template>
	<view class="container">
		<!-- <u-navbar titleStyle="color:#FFFFFF;font-size: 30rpx;" leftIconColor="#FFFFFF" bgColor="#177A77" title="个人中心"
			@rightClick="rightClick" :autoBack="true">
		</u-navbar> -->
		<view class="header"></view>
		<view class="content">
			<view class="selectTitle-block">
				<view @click="handleItem(index)" :class="index==indexID?'selectTitle':'selectTitle-active'"
					v-for="(item,index) in arr" :key="index">
					<view>{{item}}</view>
					<view :class="index==indexID?'line':'line-active'"></view>
				</view>
			</view>
			<!-- 密码登录 -->
			<view class="inputs-block">
				<u-form labelWidth="1rpx" labelPosition="left" :model="model" :rules="rules" ref="uForm">
					<u-form-item prop="username" borderBottom>
						<view style="width: 600rpx;height:110rpx;display: flex;align-items: center;">
							<u-input maxlength="11" v-model="model.username" border="none" placeholder="请输入手机号">
								<view slot="prefix" class="slotBlock">
									<image style="width: 30rpx;height: 33rpx;" src="/static/login/dl02.png" mode=""></image>
								</view>
							</u-input>
						</view>
					</u-form-item>
					<u-form-item prop="password" borderBottom v-if="indexID==0">
						<view style="width: 600rpx;height:110rpx;display: flex;align-items: center;">
							<u-input maxlength="30" password v-model="model.password" border="none" placeholder="请输入密码">
								<view slot="prefix" class="slotBlock">
									<image style="width: 30rpx;height: 33rpx;" src="/static/login/dl03.png" mode=""></image>
								</view>
							</u-input>
						</view>
					</u-form-item>
					<u-form-item prop="code" borderBottom v-if="indexID==1">
						<view style="width: 600rpx;height:110rpx;display: flex;align-items: center;">
							<u-input maxlength="4"  v-model="model.code" border="none" placeholder="请输入验证码">
								<view slot="prefix" class="slotBlock">
									<image style="width: 30rpx;height: 33rpx;" src="/static/login/dl04.png" mode=""></image>
								</view>
								<view slot="suffix">
									<view  >
										<view class="code" @click="handleCode" v-if="!isCode&& !btnDis">获取验证码</view>
										<view style="color: #177A77;font-size: 26rpx;" v-if="isCode">发送中...</view>
										<view style="color: #177A77;font-size: 26rpx;" v-if="btnDis">{{btnText}}</view>
									</view>
								</view>
							</u-input>
						</view>
					</u-form-item>
				</u-form>

				<view class="submit">
					<u-button :loading="loading" :disabled="!model.username" :custom-style="customStyleBtn1" @click="submit">确认登录</u-button>
				</view>
				
				<view class="ccBlock">
					<view class="ccBlock_top">欢迎登录</view>
					<view class="ccBlock_bottom">禧食达仓储管理系统</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {login} from '../../api/login.js'
	export default {
		data() {
			return {
				loading:false,
				// arr: ['密码登录', '验证码登录'],
				arr: ['密码登录'],
				indexID: 0,
				customStyleBtn1: {
					width: '600rpx',
					height: '101rpx',
					borderRadius: '10rpx',
					background: "linear-gradient(0deg, #177A77, #4B9C6D)",
					fontSize: '34rpx',
					fontWeight: 400,
					color: '#ffffff',
					border: 'none',
					lineHight: '50rpx !important',
					letterSpacing: '1px'
				},
				model: {
					username: '',
					password: '',
					code: ''
				},
				rules: {
					// 字段名称
					username: [{
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur'],
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['change', 'blur'],
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: ['change', 'blur'],
					}],
				},
				btnDis: false,// 发送验证码按钮不禁用
				btnText: "发送验证码",// 提示

				isCode:false,
				
			}
		},
		onLoad() {

		},
		methods: {
			// 确认登录
			submit() {
			    this.$refs.uForm.validate().then(async (res) => {
			        try {
						this.loading = true
			            let data = {
			                rememberMe: true,
			                tenantName: "喜食",
			                password: this.model.password,
			                username: this.model.username
			            };
			            let response = await login(data);
						console.log('response:',response);
						this.loading = false
						response.code != 0 && uni.showToast({
							title:response.msg,
							icon:'none'
						})
						// 缓存accessToken
						if(response.data.accessToken){
							uni.setStorageSync('accessToken',response.data.accessToken);
							uni.switchTab({
								url:'/pages/tabbar/work/index'
							})
						}
						// // 缓存refreshToken
						if(response.data.refreshToken){
							uni.setStorageSync('refreshToken',response.data.refreshToken);
						}
			        } catch (error) {
			            console.error('登录失败:', error);
						this.loading = false
			        }
			    }).catch(errors => {
			        uni.$u.toast('校验失败');
			    });
			},
			// 切换密码登录和验证码登录
			handleItem(index) {
				this.indexID = index
			},
			rightClick() {

			},
			// 获取验证码
			handleCode() {
				this.isCode = true
				setTimeout(()=>{
					this.isCode = false
					this.countDown()
				},3000)
			},
			// 验证码倒计时
			countDown() {
				let t = null; // 初始化定时器
				let timer = 60; // 倒计时1分钟
				this.btnDis = true; // 按钮禁用
				clearInterval(t); // 计时器清零
				this.btnText = `${timer}s`; // 按钮显示时间
				t = setInterval(() => { // 当倒计时完时，显示重新发送,按钮开启
					if (timer == 0) {
						clearInterval(t);
						this.btnText = "重新发送";
						this.btnDis = false;
						return;
					}
					timer--; // 实现倒计时效果
					this.btnText = `${timer}s`;
				}, 1000)
			}
		}
	}
</script>

<style scoped>
	.ccBlock_top{
		font-family: Microsoft YaHei;
		font-weight: bold;
		font-size: 62rpx;
		color: #FFFFFF;
	}
	.ccBlock_bottom{
		font-family: Microsoft YaHei;
		font-weight: bold;
		font-size: 52rpx;
		color: #FFFFFF;
		margin-top: 10rpx;
	}
	.ccBlock{
		width: 100%;
		min-height: 200rpx;
		position: absolute;
		top: 200rpx;
		padding: 15rpx 85rpx;
		box-sizing: border-box;
	}
	.code {
		ont-weight: 400;
		font-size: 26rpx;
		color: #177A77;
		text-decoration-line: underline;
	}

	.slotBlock {
		margin-right: 20rpx;
		height: 100%;
		line-height: 50%;
	}

	.submit {
		margin-top: 74rpx;
	}

	.inputs-block {
		margin-top: 24rpx;
		width: 100%;
		min-height: 340rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.block {
		width: 100%;
		height: 110rpx;
		border-bottom: 1rpx solid #EDEDED;
		display: flex;
		align-items: center;
	}

	.line {
		width: 98rpx;
		height: 6rpx;
		background: #177A77;
		border-radius: 2rpx;
	}

	.line-active {
		width: 98rpx;
		height: 6rpx;
		background: #FFFFFF;
		border-radius: 2rpx;
	}

	.selectTitle-block {
		width: 100%;
		height: 51rpx;
		display: flex;
		align-items: center;
		margin-right: 56rpx;
	}

	.selectTitle-active {
		width: 141rpx;
		height: 50rpx;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		color: #999999;
		margin-right: 56rpx;
	}

	.selectTitle {
		width: 141rpx;
		height: 50rpx;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		color: #177A77;
		margin-right: 56rpx;
	}

	.header {
		width: 750rpx;
		height: 662rpx;
		background-color: #177A77;
		/* background: linear-gradient(0deg, #177A77, #4B9C6D); */
		top: 0;
		left: 0;
	}

	.content {
		width: 690rpx;
		height: 650rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: -247rpx;
		padding: 66rpx 45rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.container {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F8F8F8;
	}
</style>